<template>
	<view class="page">
		<template v-if="isLogin">
			<view class="h45">
				<view class="fix-wrap">
					<view class="h45 limit-tab">
						<view :class="['item',{'active':type==1}]" @click="changeType(1)">
							<view class="name">通知</view>
							<view class="active-line"></view>
						</view>
						<view :class="['item',{'active':type==2}]" @click="changeType(2)">
							<view class="name">我的评论</view>
							<view class="active-line"></view>
						</view>
						<!-- <view class="item">
							<view class="name">固定tab</view>
							<view class="active-line"></view>
						</view> -->
					</view>				 
				</view>
			</view>
			
			<view class="body">
				<template v-if="loadingState.default">
					<loading :loadingState="loadingState"></loading>
				</template>
				<template v-else>
					<!-- 通知列表 -->
					<template v-if="type==1&&list.length>0">
						<view class="notice-list m-b2">
							<view class="item" v-for="(item,index) in list" :key="index">
								<view class="date">{{item.pubdate}}</view>
								<template v-if="item.outlink">
									<navigator :url="'/pages/webview/webview?page_type=notice&url='+item.outlink" hover-class="none" class="content-wrap">
										<view class="notice-title">{{item.title}}</view>
										<view v-if="item.litpic" class="pic m-b2"><image :src="item.litpic" mode="widthFix"></image></view>
										<view :class="['content',{'on':item.isshow},{'split':!item.isshow}]">{{item.description}}</view>
										<view class="show-more">
											<text class="f-blue">查看详情</text>
											<text class="iconfont f-s50 f-grey">&#xeb8a;</text>
										</view>
									</navigator>	
								</template>
								<template v-else>
									<navigator :url="'/package_member/msgDetail/msgDetail?id='+item.id" hover-class="none" class="content-wrap">
										<view class="notice-title">{{item.title}}</view>
										<view v-if="item.litpic" class="pic m-b2"><image :src="item.litpic" mode="widthFix"></image></view>
										<view :class="['content',{'on':item.isshow},{'split':!item.isshow}]">{{item.description}}</view>
										<view class="show-more">
											<text class="f-blue">查看详情</text>
											<text class="iconfont f-s50 f-grey">&#xeb8a;</text>
										</view>
									</navigator>
								</template>																 
							</view>					
						</view>
						<loading :loadingState="loadingState"></loading>
					</template>
					
					<!-- 评论列表 -->
					<template v-if="type==2&&list.length>0">
						<view class="comment-list m-b2">
							<view class="item" v-for="(item,index) in list" :key="index">
								<image class="avator-img" src="@/static/images/man.png" mode="widthFix"></image>
								<view class="info">
									<view class="user-bar">
										<view class="user-name">{{item.mid_nickname}}</view>
										<view class="day-time">{{item.addtime}}</view> 
									</view> 		 
									<view v-if="item.rmid>0" class="content split-line prev-msg">
										<view class="label">回复<text class="f-red"> {{item.rmid_nickname}}</text>：</view>
										<view class="">{{item.pinfo.content}}</view>
									</view>
									<view class="content split-line"> 
										<view>{{item.content}}</view>
									</view>
									<view v-if="item.mid>0&&item.mid!=userInfo.id" class="hf-btn m-b1" @click="hfComment(item.id,item.tid,item.mid,item.rmid,item.aid)">回复</view> 
									<navigator :url="'/package_article/detail/detail?id='+item.aid+'&type=msg'" open-type="navigate" hover-class="none" class="title split">文章：<text>{{item.title}}</text></navigator>
								</view>
							</view>					
						</view>
						<loading :loadingState="loadingState"></loading>
					</template>
					
					<template v-if="list.length==0">
						<empty msg="暂无数据"></empty>
					</template>
				</template>
			</view>
			
			<view v-if="isShowCommentForm" class="comment-form">
				<textarea v-model="comment_msg" maxlength="-1" focus="true"  confirm-type="done" cursor-spacing="10" @blur="commentMsgBlur" placeholder="请输入您的评论"></textarea>
				<view class="btn" @touchend.prevent="sendComment">发送</view>
			</view>	
		</template> 
	</view>
</template>

<script>
	import {APP_NAME,HTTP_REQUEST_URL_2} from '@/config.js'
	import loading from '@/components/loading-more.vue'
	import empty from '@/components/empty.vue'
	export default {
		name: 'demo',
		data() {
			return {
				type:1,  // 1 通知 2 评论
				isLogin: false, 
				userInfo: uni.getStorageSync('userInfo'),
				loadingState:{
					default:true,
					loading:false, 
					completed:false
				}, 
				list:[],
				pid:'',
				tid:'',
				rmid:'',
				aid:'',
				rid:[],
				total:0,
				page:1,
				isShowCommentForm:false,
				comment_msg:'',
				web_host:HTTP_REQUEST_URL_2
			}
		},
		async onShow() { 
		},
		async onLoad() {
			this.isLogin=await this.$loginState('check');
			if(this.isLogin){ 
				if(this.type==1){
					this.noticeList();
				}else if(this.type==2){
					this.getMsgList();
				}				
			} 
		},
		onReachBottom(){
			if(this.loadingState.completed){
				this.page=1;
				return false
			}else{
				if(this.list.length<this.total&&this.list.length>0){
					this.page++;
					if(this.type==1){
						this.noticeList();
					}else if(this.type==2){
						this.getMsgList();
					} 
				} 
			}	  
		},
		methods: {
			
			// 切换列表类型
			changeType:function(type){
				// type 1 通知  2 评论
				if(this.type==type) return;
				this.list=[];
				this.loadingState.default=true;
				this.loadingState.loading=false;
				this.loadingState.completed=false;
				this.page=1;
				this.total=0;
				this.type=type;
				if(type==1){
					this.noticeList();
				}else if(type==2){
					this.getMsgList();
				}
			},
			
			// 回复我的
			getMsgList:async function(){
				let res=await this.$api.news_api.news({
					act:'myreview',
					aid:this.id,
					mid:this.userInfo.id ,
					rtype:0,
					isread:0,
					page:this.page
				})  
				if(res.data.rcode==1){
					this.loadingState.default=false;
					this.loadingState.loading=true;
					this.total=res.data.rdata.count;
					this.list=this.list.concat(res.data.rdata.list);
					if(this.list.length==res.data.rdata.count){
						this.loadingState.default=false;
						this.loadingState.loading=false;
						this.loadingState.completed=true;
					}
					res.data.rdata.list.forEach(item=>{
						if(this.rid.indexOf(item.id)==-1){
							this.rid.push(item.id)
						}
					}) 
					// this.msgReview();
				}else{
					this.loadingState.default=false;
				} 
			},
			
			// 通知消息
			noticeList:async function(){
				let res=await this.$api.news_api.news({
					act:'noticelist',
					page:this.page,
					user_id:this.userInfo.id
					
				})  
				console.log(res)
				if(res.data.rcode==1){
					this.loadingState.default=false;
					this.loadingState.loading=true;
					this.total=res.data.data.count; 				
					this.list=this.list.concat(res.data.data.list);
					if(this.list.length==res.data.data.count){
						this.loadingState.default=false;
						this.loadingState.loading=false;
						this.loadingState.completed=true;
					}  
				}else{
					this.loadingState.default=false;
				}
			},
			
			// 消息已读
			msgReview:async function(){
				let rid=this.rid.join(',');
				let res=await this.$api.news_api.news({
					act:'read_review',
					mid:this.userInfo.id,
					rid:rid
				})  
				if(res.data.rcode==1){
					// this.list=this.list.concat(res.data.rdata.list) 
				} 
			},
			
			// 回复评论
			hfComment:function(id,tid,mid,rmid,aid){ 
				this.pid=id;
				this.tid=tid;
				this.rmid=mid; 
				this.aid=aid; 
				this.isShowCommentForm=true; 
			},
			
			// 获取评论内容
			commentMsgBlur:function(e){ 
				this.comment_msg=e.detail.value;
				this.isShowCommentForm=false;
			},
			
			// 发送评论
			sendComment:async function(){  
				let _this=this;
				if(this.comment_msg==''){
					uni.showToast({
						icon:'none',
						title:'请输入评论内容',
						mask:true
					})
				}else{
					let res=await this.$api.news_api.news({
						act:'review',
						aid:this.aid,
						mid:this.userInfo.id,
						rmid:this.rmid,
						pid:this.pid,
						tid:this.tid,
						content:this.comment_msg, 
					})  
					if(res.data.rcode==1){
						uni.showToast({
							icon:"success",
							title:res.data.rmsg,
							mask:true,
							async success() {
								_this.isShowCommentForm=false;
								_this.comment_msg=''; 
								_this.list=[];
								_this.total=0;
								_this.page=1;
								_this.commentLoading={
									loading:true,
									completed:false
								}
								_this.getMsgList(); 
							}
						})
					}else{
						uni.showToast({
							icon:"none",
							title:res.data.rmsg,
							mask:true,
							async success() {
								_this.isShowCommentForm=false;
								_this.comment_msg='';  
							}
						})
					}
				}
			},
		},
		computed: {

		},
		components: {
			loading,
			empty
		},
		onUnload() {
			 
		},
	}
</script>

<style lang="less"> 
	.page{
		height: 100%; 
	}
	.comment-list{
		background: #fff;
		padding:0 16rpx;
		overflow: auto;
		.hf-btn{
			width: 80rpx;
			text-align: center;
			height: 40rpx;
			line-height: 40rpx;
			background: #f5f5f5;
			border-radius: 8rpx;
			color:#999;
			font-size: 30rpx;
		}
		.more-btn{
			width: 220rpx;
			margin:20rpx auto;
			text-align: center;
			line-height: 50rpx;
			border:2rpx solid #ddd;
			border-radius: 36rpx;
			font-size: 26rpx;
			color:#333;
		}
		.item{
			overflow: hidden;
			display: flex;
			padding:20rpx 0;
			border-bottom:2rpx dotted #ddd;
			.avator-img{
				width:60rpx;
				border-radius:50%;
				margin-right:20rpx;
				image{
					width:100%;
					border-radius: 15rpx;
				}
			}
			.info{
				width:85%;
				.user-bar{
					display: flex;
					justify-content: space-between;
					margin-bottom:5rpx;
					.user-name{
					  	font-size:28rpx; 
					}
				}
				.day-time{
					margin-bottom:10rpx;
					color:#999;
					font-size:28rpx;
				}
				.content{
					display: flex;
					margin-bottom:20rpx;
					font-size:28rpx;
					color:#666;
					text{
						margin-left: 8rpx;
					}
				}
				.prev-msg{
					align-items: flex-start;
					padding:10rpx;
					border:1rpx dotted #ccc;
					background: #f5f5f5;
					color:#999;
					.label{
						flex-shrink: 0;
					}
				}
				.title{
					padding:10rpx;
					background: #f5f5f5;
					color:#999;
					font-size: 30rpx;
					text{
						color:#f00;
					}
				}
				.handle-bar{
					display: flex;
					justify-content: flex-end;
					.zan-btn{
						color:#999;
					}
				}
				.label{
					display: flex;
					align-items: center;
					color:#999;
					.iconfont{
						margin-right:10rpx;
						font-size: 38rpx;
					}
				}
			}
		}
	} 
	.comment-form{
		display: flex;
		align-items: flex-end;
		border-top:1rpx solid #eee;
		padding:20rpx 0;
		background: #fff;
		textarea{
			height: 100rpx;
			margin:0 20rpx;
			padding:10rpx;
			border: 1rpx solid #eee;
			border-radius: 5rpx;
			font-size: 28rpx;
		}
		.btn{
			width: 90rpx;
			text-align: center;
			background: #f00;
			border-radius: 10rpx;
			margin-right: 20rpx;
			padding:2rpx 10rpx;
			color:#fff;
			font-size: 30rpx;
		}
	}

	.notice-list{
		.item{ 
			margin-bottom: 50rpx;
			.date{
				margin: 20rpx 0 40rpx;
				font-size: 30rpx;
				text-align: center;
				color:#999;
			}
			.content-wrap{
				width: 85%;
				margin: 0 auto 30rpx;
				padding:30rpx 30rpx 10rpx;
				background: #fff;
				border-radius: 15rpx;
				.notice-title{
					margin-bottom: 20rpx;
					font-size: 30rpx;
					font-weight: bold;
				}
				.content{
					height:40rpx;
					overflow: hidden;
					margin-bottom: 20rpx;
					font-size: 28rpx;
					color:#666;
				}
				.pic{
					image{
						width: 100%;
						border-radius: 10rpx;
					}
				}
				.on{
					height: auto;
				}
				.show-more{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding:10rpx 0 0;
					border-top: 1rpx solid #eee;
					font-size: 28rpx; 
				}
			}
		}
	}

</style>
